<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view class="sign-in-page">
    <nav-bar :title="signinfo.ymCarouselFigure.title" background="#f75454" color="#ffffff" textAlign="center"></nav-bar>
    <!-- 封面图 -->
    <view class="cover-container">
      <image :src="signinfo.indexImg"></image>
    </view>
    <!-- 签到卡片 -->
    <view class="sign-in-card-container">
      <view class="card">
        <view class="title">
          <text>已连续签到</text>
          <text class="bold">{{signinfo.userSignCount}}</text>
          <text>天</text>
        </view>
        <text class="note" v-if="signinfo.userSignCount<10">
          再签到{{signinfo.userSignCount<5?5-signinfo.userSignCount:10-signinfo.userSignCount}}天即可领取奖励，再签到{{signinfo.needDay-signinfo.userSignCount}}天即可领取终极礼品
        </text>
        <text class="note" v-else-if="signinfo.userSignCount>=10&&signinfo.userSignCount<15">
          签到{{signinfo.needDay-signinfo.userSignCount}}天即可领取终极礼品
        </text>
        <text class="note" v-else>
          恭喜你圆满完成签到活动
        </text>
        <view class="progress">
          <view class="progress-container">
            <!-- 进度 -->
            <view class="progress-line">
              <view class="line" :style="{width:p+'%'}"></view>
              <view class="dot-container">
                <view class="dot">
                  <view class="round" style="opacity: 0;"></view>
                  <text>1天</text>
                </view>
                <view class="dot" :class="{'dot-no':signinfo.userSignCount<5}">
                  <view class="round"></view>
                  <text>5天</text>
                </view>
                <view class="dot" :class="{'dot-no':signinfo.userSignCount<10}">
                  <view class="round"></view>
                  <text>10天</text>
                </view>
                <view class="dot" :class="{'dot-no':signinfo.userSignCount<15}">
                  <view class="round"></view>
                  <text>15天</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <block v-if="signinfo.userSignCount<signinfo.needDay">
          <view class="btn" @click="handleSignIn" v-if="!signinfo.isSign">
            <text>点击签到</text>
          </view>
          <view class="btn singn-btn" v-else>
            <text>已签到</text>
          </view>
        </block>
        <block v-else>
          <view class="btn singn-btn">
            <text>已签满</text>
          </view>
        </block>

        <view class="tips" @click="$refs.tip.open('bottom')">
          <image src="/static/sign-in/question-fill.png"></image>
          <text>活动规则</text>
        </view>
      </view>
    </view>
    <!-- 签到详情 -->
    <view class="sign-list-container">
      <block v-for="index in signinfo.needDay">
        <view class="sign-item-block">
          <view class="sign-item" :class="{'sign-item-no':(index+1)>signinfo.userSignCount}"
            @click="handleItemClick(index)">
            <view class="head">
              <text>第{{index+1}}天</text>
            </view>
            <view class="content">
              <block v-if="[5,15,10].includes(index+1)">
                <!-- 出图 -->
                <image :src="signinfo.items[index+1].img" v-if="(index+1)<=signinfo.userSignCount"></image>
                <!-- 隐藏 -->
                <image src="/static/sign-in/gift.png" v-else></image>
              </block>
              <block v-else>
                <image src="/static/sign-in/signed.png" v-if="(index+1)<=signinfo.userSignCount"></image>
                <image src="/static/sign-in/no-sign.png" v-else></image>
              </block>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="end-note">
      <text>本活动最终解释权归启嘉校园运营方所有</text>
    </view>
    <uni-popup ref="tip" @change="change">
      <view class="tip-container">
        <view class="head">
          <text class="title">活动规则</text>
          <uni-icons type="close" :size="32" @click="$refs.tip.close()"></uni-icons>
        </view>
        <view class="content">
          <u-parse :content="article" :imageProp="{
            mode:'widthFix'
          }"></u-parse>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="gift" @change="change" :is-mask-click="false">
      <view class="gift-container">
        <view class="head">
          <image src="/static/sign-in/modal-head-img.png" mode=""></image>
        </view>
        <view class="content">
          <text class="title">{{currnt.title}}</text>
          <image :src="currnt.img"></image>
          <view class="text">
            <text>请到</text><text class="bold"> 笃学楼105 </text><text>领取</text>
          </view>
          <view class="text">
            <text>逾期未领即视为放弃领取</text>
          </view>
        </view>
        <view class="close">
          <uni-icons type="close" size="40" color="#FCBBBB" @click="$refs.gift.close()"></uni-icons>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import uParse from "@/components/u-parse/u-parse.vue";
  import {
    carouselFigureDetailApi
  } from '@/api/used/used.js'
  import {
    marked
  } from "marked";
  import {
    signCount,
    signIn
  } from "@/api/sign";
  export default {
    components: {
      uParse
    },
    computed: {
      p() {
        return ((this.signinfo.userSignCount / this.signinfo.needDay) * 100).toFixed(2)
      },
    },
    data() {
      return {
        article: '',
        show: false,
        count: 15,
        signed: 0,
        signinfo: {
          userSignCount: 0,
          signInDate: 0,
          needDay: 0,
          isSign: 0,
          ymCarouselFigure: {
            content: '',
            img: '',
          }
        },
        currnt: {
          img: '',
          title: ""
        }
      };
    },
    onLoad(e) {
      this.handleSignCount(e.id);
      let userObj = uni.getStorageSync('userObj');
      if(!userObj||userObj==''){
        uni.navigateTo({
          url: `pages/my/my`
        });
      }
    },
    onShareAppMessage() {},
    onShareTimeline() {},
    methods: {
      change(e) {
        this.show = e.show
      },
      /**
       * 获取签到信息
       */
      async handleSignCount() {

        let {
          data: res
        } = await signCount()
        if (res.success) {
          const article = res.data.sign.ymCarouselFigure.content ? res.data.sign.ymCarouselFigure.content : '暂无';
          this.article = marked(article);
          this.$set(this, 'signinfo', res.data.sign);
        }

      },
      /**
       * 签到
       */
      async handleSignIn() {
        uni.showLoading({
          title: "正在签到"
        })
        let {
          data: res
        } = await signIn()
        uni.hideLoading()
        if (res.success) {
          if ([4, 9, 14].includes(this.signinfo.userSignCount)) {
            this.handleSetCurrent(this.signinfo.userSignCount + 1);
            this.$refs.gift.open('center')
          } else {
            uni.showToast({
              title: "签到成功",
              icon: "none"
            })
          }
          this.handleSignCount();
        } else {
          uni.showToast({
            title: res.message,
            icon: "none"
          })
        }
      },
      handleSetCurrent(num) {
        let find = this.signinfo.items;
        this.$set(this, 'currnt', {
          img: find[num].img,
          title: find[num].shopName
        })
      },
      /**
       * 点击块
       */
      handleItemClick(index) {
        let num = index + 1;
        if ([5, 15, 10].includes(num)) {
          if (num <= this.signinfo.userSignCount) {
            this.handleSetCurrent(num);
            this.$refs.gift.open('center')
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  @import url("@/components/u-parse/u-parse.css");

  .sign-in-page {
    min-height: 100vh;
    background-color: #fff;

    .cover-container {
      width: 100%;
      height: 300rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .sign-in-card-container {
      padding: 36rpx;
      box-sizing: border-box;
      margin-top: -96rpx;

      .card {
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 320rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        .title {
          text {
            font-size: 40rpx;
            font-weight: bold;
            line-height: 36rpx;
            letter-spacing: 0em;
            color: #333333;
          }

          .bold {
            color: #F75454;
          }
        }

        .note {
          font-size: 20rpx;
          font-weight: normal;
          line-height: 12rpx;
          text-align: center;
          letter-spacing: 0em;
          color: #999999;
          padding: 32rpx 0;
        }

        .progress {
          width: 100%;
          padding-bottom: 72rpx;

          .progress-container {
            width: 100%;
            padding: 0 32rpx;
            box-sizing: border-box;

            .progress-line {
              width: 100%;
              height: 16rpx;
              position: relative;
              border-radius: 100rpx;
              background: rgba(247, 84, 84, 0.4);

              .line {
                position: absolute;
                left: 0;
                top: 0;
                width: 0%;
                height: 16rpx;
                border-radius: 100rpx;
                background: rgba(247, 84, 84, 1);
                display: block;
                transition: width ease 0.3s;
              }

              .dot-container {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 16rpx;


                .dot {
                  .round {
                    width: 36rpx;
                    height: 36rpx;
                    background-color: #ffffff;
                    border-radius: 100%;
                    border: 10rpx solid #F75454;
                    box-sizing: border-box;
                  }

                  text {
                    display: block;
                    font-size: 20rpx;
                    font-weight: 500;
                    line-height: 20rpx;
                    letter-spacing: 0em;
                    color: #666666;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    width: 48rpx;
                    text-align: center;
                    transform: translateY(16rpx) translateX(-8rpx);
                  }
                }

                .dot-no {
                  .round {
                    border: 10rpx solid rgba(247, 84, 84, 0.4);
                  }
                }

                .dot:nth-child(1) {
                  position: absolute;
                  left: 0;
                  top: 0;
                  transform: translateX(-50%) translateY(-8rpx);
                  width: 36rpx;
                  height: 36rpx;
                }

                .dot:nth-child(2) {
                  position: absolute;
                  left: 33.3%;
                  top: 0;
                  transform: translateX(-50%) translateY(-8rpx);
                  width: 36rpx;
                  height: 36rpx;
                }

                .dot:nth-child(3) {
                  position: absolute;
                  left: 66.6%;
                  top: 0;
                  transform: translateX(-50%) translateY(-8rpx);
                  width: 36rpx;
                  height: 36rpx;
                }

                .dot:nth-child(4) {
                  position: absolute;
                  left: 100%;
                  top: 0;
                  transform: translateX(-50%) translateY(-8rpx);
                  width: 36rpx;
                  height: 36rpx;
                }
              }
            }

          }

        }

        .btn {
          width: 464rpx;
          height: 64rpx;
          border-radius: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: #F75454;
          color: #ffffff;
        }

        .singn-btn {
          background: rgba(247, 84, 84, 0.4);
        }

        .tips {
          position: absolute;
          right: 16rpx;
          top: 24rpx;
          display: flex;
          align-items: center;

          image {
            width: 48rpx;
            height: 48rpx;
          }

          text {
            font-size: 24rpx;
            font-weight: 500;
            line-height: 24rpx;
            letter-spacing: 0em;
            color: #666666;
            padding-left: 4rpx;
          }
        }
      }
    }

    .sign-list-container {
      padding: 26rpx;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;

      .sign-item-block {
        padding: 10rpx;
        width: 20%;
        box-sizing: border-box;

        .sign-item {
          width: 100%;
          height: 128rpx;
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          background-color: #fff;
          overflow: hidden;

          .head {
            width: 100%;
            height: 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F75454;

            text {
              font-size: 20rpx;
              font-weight: normal;
              line-height: 24rpx;
              letter-spacing: 0em;
              color: #fff;
            }
          }

          .content {
            width: 100%;
            height: calc(100% - 32rpx);
            display: flex;
            align-items: center;
            justify-content: center;

            image {
              width: 60rpx;
              height: 60rpx;
            }

          }
        }

        .sign-item-no {
          opacity: 0.4;
        }
      }
    }

    .tip-container {
      height: calc(100vh - 320rpx);
      background-color: #fff;
      padding: 16rpx;
      box-sizing: border-box;

      .head {
        width: 100%;
        height: 64rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-size: 32rpx;
          font-weight: bold;
        }
      }

      .content {
        width: 100%;
        height: calc(100% - 64rpx);
        overflow: auto;
        padding: 32rpx 0;
        box-sizing: border-box;
      }
    }

    .gift-container {
      width: 688rpx;
      box-sizing: border-box;
      padding: 0 48rpx;
      box-sizing: border-box;
      padding-top: 92rpx;
      display: flex;
      justify-content: center;

      .head {
        position: absolute;
        left: 0;
        top: 0;
        height: 132rpx;
        width: 688rpx;
        z-index: 1;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .content {
        width: 100%;
        border: 2px solid #F75454;
        background: #FFFFFF;
        border-radius: 8px;
        padding: 72rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          font-size: 36rpx;
          font-weight: bold;
          line-height: 64rpx;
          text-align: center;
          letter-spacing: 0em;
        }

        .text {
          width: 308rpx;
          font-size: 28rpx;
          font-weight: 500;
          line-height: 44rpx;
          text-align: center;
          letter-spacing: 0em;
          color: #666666;

          .bold {
            color: #F75454;
          }
        }



        image {
          width: 360rpx;
          height: 360rpx;
        }
      }

      .close {
        position: absolute;
        width: 100%;
        height: 80rpx;
        bottom: -64rpx;
        transform: translateY(50%);
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }

    .end-note {
      padding-top: 64rpx;
      padding-bottom: 16rpx;
      font-size: 20rpx;
      font-weight: normal;
      line-height: 20rpx;
      text-align: center;
      letter-spacing: 0em;
      color: #999999;
    }
  }
</style>